<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" th:href="@{/element-plus/index.css}">
</head>
<body>
<div id="app">
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
</el-table-column>
</el-table>

</div>

<script th:src="@{/js/vue.global.js}"></script>
<script th:src="@{/element-plus/index.js}"></script>
<script th:src="@{/element-plus/icon.js}"></script>

<script >
  const app = Vue.createApp({
    data(){
      return {
        tableData: [{
          date: '2020-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2020-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2020-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2020-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  });

  app.use(ElementPlus);
  // 注册所有 Element 图标
  for (const iconName in ElementPlusIconsVue) {
    app.component(iconName, ElementPlusIconsVue[iconName]);
  }

  const vm = app.mount('#app');
</script>
</body>
</html>